h2. Index

<a href="#Overview">Overview</a>
<a href="#xmlns">HTML Tag xmlns Attribute</a>
<a href="#Clearfix">Clearfix</a>
<a href="#Incompatibilities">Incompatible CSS - Internet Explorer</a>
<a href="#Example">A Customization Example</a>

<a name="Overview"></a>

h4. Overview

The stylesheets "that can be generated during the installation of the Formtastic gem":http://wiki.github.com/justinfrench/formtastic/2-installation#css_generator (formtastic.css and formtastic_changes.css) are a _proof of concept_, intended to show how one might approach styling forms based on Formtastic's markup choices.

Most notable is the choice to wrap each "input" in an @<li>@ tag, and each group of inputs in an @<ol>@ and @<fieldset>@. The FAQ "provides a detailed discussion":http://wiki.github.com/justinfrench/formtastic/faqs#tags on this choice. 

The provided stylesheets are *general purpose*, meaning that they're trying to solve a problem for a lot of people, in a lot of very different contexts, websites and layouts.  This means a few things:

# they can't and won't suit all situations
# they're relatively bloated and verbose, when compared to purpose-built styles for a given situation

If you have a skilled stylesheet author in your team, you may choose to simply write your own CSS. Justin French (the creator of Formtastic) doesn't use the default stylesheets on any of his own projects, as it's far faster to write styles that suit the rest of his layout, only styling the parts of Formtastic he needs.

If your team lacks CSS-fu, it suggested that you put formtastic.css in place as a default, then make any changes you need in formtastic_changes.css. It'll save you a heap of time up front, and you can always remove them later. The styles are name spaced well and _shouldn't_ interfere with the rest of your layout.

Design decisions in the supplied stylesheets:

* The use of order lists (@<ol><li></li></ol>@ as containers for labels, inputs, hint text, inline error messages etc. A design choice that favours ordered lists makes intuitive sense in that a form is a _listing_ of data input fields. 
* The html tags @<fieldset></fieldset>@ and @<li></li>@ have the css float "clearfix":http://wiki.github.com/justinfrench/formtastic/9-definitions-references-cheatsheets-tutorials#clearfix set of declarations applied to them - clearfix will be discussed later.  
* Within @<li></li>@ list items, labels are styled using @display:block;@ and @float:left;@ 
* Inputs or selects are also included in the @<li></li>@  container with the floated labels and thus the need for the use of clearfix.  
* Labels are given 25% of the width of the @<li></li>@ container and inputs 74%

As a result of these styling choices, labels and their associated inputs are displayed as a vertical listing of a single label and input pair on separate lines.

<a name="xmlns"></a>

h4. HTML Tag XMLNS Attribute

Let's review some background information that has an impact on Formtastic's default styling. The standard document type declaration, as well as, @<html>@ tag produced by the Rails scaffold generator are:

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</pre>

Note the xmlns _attribute_ included in the @<html>@ "root element tag":http://wiki.github.com/justinfrench/formtastic/9-definitions-references-cheatsheets-tutorials#html_tag. If the @<html>@ xmlns attribute is not included with an XHTML document type then the document "will fail WC3 markup validation":http://www.w3.org/TR/xhtml1/#strict .

XMLNS is an "attribute selector":http://www.w3.org/TR/CSS2/selector.html#attribute-selectors assigned to the root @<html@ tag. It, in effect, creates a whole new xml name space that is available under css 2.1 styling. As a name space identifier, it is available as a selector for any other document tags contained by the @<html>@ tag. 

<a name="Clearfix"></a>

h4. Clearfix

The Formtastic file formtastic.css contains a set of css declarations know as clearfix.

Clearfix is a solution for "the problem of overlapping containers":http://wiki.github.com/justinfrench/formtastic/9-definitions-references-cheatsheets-tutorials#clearfix. It's a solution that uses css hacks, as well as, specific declarations to fix the overlapping container problem.  

Clearfix will likely be replaced by a "much simpler solution":http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ in a later version of Formtastic.

Here's one example of that simpler solution devoid of any hacks. For comparison purposes, an extract of Formtastic's clearfix method is shown below this simpler solution. In the future, hacks will not likely be needed based on these "I. E. browser market share trends":http://www.w3schools.com/browsers/browsers_stats.asp .

<pre>
/* One possible 'simple' solution */

.containingElement{
overflow: hidden;
height: 100%;
 }
</pre>

Despite being somewhat complex and convoluted, the following clearfix solution has one very big advantage; it is know to work across a braod selection of browsers and browser versions.

Here's clearfix as included with the current formtastic.css file for both fieldsets and ordered lists

<pre>
/* clearfixing the fieldsets */

form.formtastic fieldset { display: inline-block; }
form.formtastic fieldset:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset { display: block; }
* html form.formtastic fieldset { height: 1%; }

/* clearfixing the li's */
form.formtastic fieldset > ol > li { display: inline-block; }
form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset > ol > li { display: block; } 
* html form.formtastic fieldset > ol > li { height: 1%; }
</pre>

Briefly, the purpose of each clearfix declaration is:

* @form.formtastic fieldset > ol > li { display: inline-block; }@  - this is a hack required by I.E. for the MacIntosh - a browser that is no longer supported by Microsoft.

* @form.formtastic fieldset > ol > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }@ is the set of core clearfix declarations.

* @html[xmlns] form.formtastic fieldset > ol > li { display: block; }@ - this overrides the @display: inline-block;@  hack that what was done to accommodate the incorrect or poor implementation by IE/MAC of @display:@. IE/MAC doesn't respond to the xmlns attribute selector.

* @* html form.formtastic fieldset > ol > li { height: 1%;}@ this is a hack for older versions of IE - "this selector sequence should fail":http://reference.sitepoint.com/css/universalselector but IE 5.5, 6 and 7 respond to it and apply the style associated with it as does Opera 9.2.   

The "Position is Everything":http://www.positioniseverything.net/easyclearing.html  web site gives a detailed explanation of clearfix. It also contains a link to an explanation  of "the much cleaner solution for the clearing of floats":http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ .

Here's another recent (April 2010) discussion of clearfix found at the "Think Vitamin Blog":http://carsonified.com/?s=clearfix - the comments related to this article contain some good points for and against clearfix as a solution.

One difference from the PIE implementation of clearfix and that of Formtastic, is the use of the "xmlns attribute (CSS 2.1)":http://www.w3.org/TR/CSS2/selector.html#attribute-selectors  in the declaration 
@html[xmlns] form.formtastic fieldset > ol > li { display: block; }@ which, as mentioned above, IE/MAC does not respond to. 

<a name="Incompatibilities"></a>

h4. Incompatible CSS: Internet Explorer

As "IE 6's market share":http://www.w3schools.com/browsers/browsers_stats.asp drops, this sub-topic may only be relevant for a client group, that for some reason, is still locked into using IE 6.

With that introduction, the formtastic.css file, as of Formtastic version 0.98, uses the css "child selector  operator":http://reference.sitepoint.com/css/childselector (>) which IE 6 does not support.

<pre>
form.formtastic fieldset > ol > li.string input { max-width: 74%; }
</pre>

Since IE 6 does not recognize the child selector, the quality of its styling is impacted by the formtastic.css (version 0.98) as shown "by this screenshot":http://www.flickr.com/photos/49687205@N02/4575110458/in/set-72157623858841941/

When the child selectors are removed from a css file "such as this iefixes.css example file":http://wiki.github.com/justinfrench/formtastic/73-example-iefixescss and as shown in the code snippet below

<pre>
form.formtastic fieldset ol li.string input { max-width:74%; }
</pre>

the styling improves "as seen in this screen shot":http://www.flickr.com/photos/49687205@N02/4582938894/in/set-72157623858841941/ . In the above case, the styling uses "descendant selectors":http://reference.sitepoint.com/css/descendantselector rather than child selectors.

If your client base uses EI 6, you may want to make use of it's conditional comment statement to include an ie6fixes.css file as part of the css file linking sequence.

<pre>
<%= stylesheet_link_tag  'formtastic','formtastic_changes' %>

<!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="/stylesheets/iefixes.css" />
![endif]-->
</pre>

Javascript can also be used to selectively load external css files based on browser and browser version.

<a name="Example"></a>

h4. CSS Customization Example

This sub-section reviews a Formtastic css customization example.

The example re-styles Formtastic's default listing of radio buttons (vertical listing) and displays them in-line across the width of the form. The objective is to achieve a somewhat more user friendly listing for a long listing of radio buttons.

_In Line Radio Buttons_

These changes are made to the formtastic_changes.css file:

<pre>
/* RADIO OVERRIDES - display radio buttons in line
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset > ol > li.radio fieldset ol li {
    margin:0.1em 0.5em 0.5em 0;
    display: inline-block;
}
</pre> 

and for IE 6 and 7 these are the styling declarations required to accommodate the fact that to achieve @display: inline-block;@ it is incorrectly implemented by these two browsers via the the declaration @display: inline;@

<pre>
/* RADIO OVERRIDES - IE 6 and 7
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.radio { }
form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em;}
form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0.5em 0.5em 0; display:inline; }
form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; display:inline; }
form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }
</pre>

This in-lining of the radio buttons is included in the example file "iefixes.css":http://wiki.github.com/justinfrench/formtastic/73-example-iefixescss discussed in the previous sub-section.

The above in-line listing of radio buttons has been tested using "Adobe's Browser Lab":http://browserlab.adobe.com/ for the following browsers:

* Chrome 3.0
* Firefox 2.0, 3.0, 3.6 Windows, OSX
* Safari OSX  3.0, 4.0

and Microsofts' "SuperPreview":http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en for IE 6 and IE 7

These solutions were also tested against the latest windows versions of Chrome, Firefox, Internet Explorer and Opera.

Firefox 2.0 (Windows and OSX) were the only browsers that failed to render the buttons in-line and are not likely worth any effort to get them to do so. They continued to render the buttons vertically.

Here's an example of "IE 6 with the radio buttons displayed in-line":http://www.flickr.com/photos/49687205@N02/4575179605/ as styled by the iefixes.css file.